<template>  
    <section>  
      <!-- 面包屑导航组件 -->  
      <bread-crumb :model-value="navData"></bread-crumb>  
      <!-- 表格组件 -->  
      <table-component ref="tableRef" @show="handleShow"></table-component>  
      <!-- 使用keep-alive搭配动态组件，进行增加、修改组件的缓存 -->  
      <keep-alive>  
        <component   
        :is="getComponent"   
        :rowData="rowData"   
        @close="handleClose"></component>  
      </keep-alive>  
    </section>  
  </template>  
    
  <script lang="ts" setup>  
  import { ref, computed } from "vue";  
  import TableComponent from "@/components/correcting/CorrectingTable.vue";
  import UpdateComponent from "@/components/correcting/CorrectingUpdate.vue"; 
  import BreadCrumb from "@/components/public/BreadCrumb.vue";  
    
  // 面包屑数据  
  const navData = [  
    {  
      name: "课程纠错列表"  
    }  
  ]  
    
  // 关闭/隐藏组件  
  const showValue = ref<string>("");  
    
  // 表格组件的引用  
  const tableRef = ref<any>();  
    
  // 要修改的行数据  
  const rowData = ref<any>({});  
    
  /**  
   * 显示组件  
   * @param value  
   * @param row  
   */  
  const handleShow = (value: string, row?: any) => {  
    showValue.value = value;  
    if (row) {  
      rowData.value = row;  
    }  
  }  
    
  /**  
   * 关闭组件  
   * @param updated 是否有新数据更新（或更新的数据）  
   */  
  const handleClose = (updated: boolean | any) => {  
    showValue.value = "";  
    if (updated) {  
      if (tableRef?.value) {  
        tableRef.value.handleReset()  
      }  
    }  
  }  
    
  // 根据showValue值，获取要显示的组件  
  const getComponent = computed(() => {  
    if (showValue.value == "update") {  
      return UpdateComponent;  
    } else {
      return null;  
    }  
  })  
  </script>